<template>
  <div class="home">
    <p>{{ username }}</p>
    <ul>
      <li v-for="listData in listDatas" :key="listData.id">
        {{ listData.title }}</li>
    </ul>
  </div>
  <button @click="changeMsg">改变数据</button>
</template>

<!-- setup新写法 -->
<script setup>
import { reactive, toRefs } from 'vue'

// 1.reactive使数据成为响应式
// reactive:可以设置对象成为响应式
let obj = reactive({
  username: '小樊',
  listDatas: [
    { id: '1001', title: '小王1' },
    { id: '1002', title: '小王2' },
    { id: '1003', title: '小王3' }
  ]
});

let { username, listDatas } = toRefs(obj)

let changeMsg = () => {
  console.log('修改数据');
  username.value = '修改小杨'
  // 补充:都可以修改
  listDatas.value[0] = { id: '1001', title: '修改小王1' }
  listDatas.value[1].title = '修改小王2'
}

</script>
